<template>
  <view class="main_new">
    <view class="content" @click="goActivityCenter">
      <view class="points_left">
        <image
          class="points_icon"
          src="/static/img/points_icon.png"
          mode="scaleToFill"
        />
        <view class="title_new">{{ title }}</view>
      </view>
      <view class="points">
        <view class="num">+{{ points }}</view>
        <view class="text">积分</view>
        <view class="arrow">
          <image
            class="arrow_img"
            src="/static/img/arrow-right.svg"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "pointsTips",
  props: {
    points: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {},

  methods: {
    goActivityCenter() {
      uni.navigateTo({ url: "/pointsMall/index/index" });
    },
  },
};
</script>

<style lang="scss" scoped>
.main_new {
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  .content {
    width: 505rpx;
    height: 70rpx;
    background: linear-gradient(180deg, #deefff 0%, #ffffff 100%);
    border-radius: 144rpx;
    border: 1rpx solid #edeff3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34rpx;

    .points_left {
      display: flex;
      align-items: center;

      .points_icon {
        width: 34rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }

      .title_new {
        font-size: 26rpx;
        color: #333333;
        font-weight: 600;
        line-height: 1;
      }
    }

    .points {
      display: flex;
      align-items: center;

      .num {
        font-size: 26rpx;
        color: #ff6161;
        line-height: 60rpx;
      }

      .text {
        font-size: 26rpx;
        font-weight: 600;
        color: #333333;
        line-height: 60rpx;
        margin-right: 10rpx;
      }

      .arrow {
        width: 22rpx;
        height: 22rpx;
        background: #1c87f3;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .arrow_img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
